.container {
  /* Step 1: Set display to grid */
  display: grid;
  /* Step 2: setup rows amd columns */
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
  /* Step : setup named grid areas */

  border: 2px solid yellow;

}

.box {
  border: 1px solid red;
  background: #F8FA9D;
}

.header {
  /* Set elements grid-area here */
  grid-column: 1 / span 2;
}

@media(min-width:900px) {
  .header {
    /* Set elements grid-area here */
    grid-column: 1;
  }
}

.footer {
  /* Set elements grid-area here */
  grid-row: 4;
  grid-column: 1 / span 2;
}

.feature {
  /* Set elements grid-area here */
  grid-row: 2;
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.content {
  /* Set elements grid-area here */
  grid-row: 3;
  grid-column: 1 / span 2;

}